<template>
  <div class="main">
    <section>
      <div class="btn-block" v-if="rightsButtons['add']">
        <el-button type="success" size="small" icon="el-icon-circle-plus" @click="$router.push({ name: 'homeTabAdd' })" plain>新建页面</el-button>
      </div>
      <!-- 搜索栏 -->
      <search-form :listQuery="listQuery" :queryConfig="queryConfig" :labelWidth="100" :search="search"/>

      <!-- 列表 -->
      <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
        <el-table-column align="center" label="序号" type="index" fixed :index="(index)=>{return indexMethod(index, listQuery)}" width="80">
        </el-table-column>
        <el-table-column align="center" label="页面名称" prop="name" min-width="120"></el-table-column>
        <el-table-column align="center" label="页面类型" prop="typeName" min-width="120">
          <template slot-scope="scope">
            <span>{{scope.row.typeName}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建时间" prop="endTime" min-width="120">
          <template slot-scope="scope">
            <span>{{formatDate(scope.row.createdAt, 'YYYY-MM-DD HH:mm:ss')}}</span>
          </template>
        </el-table-column>
        <el-table-column header-align="center" label="操作" width="190" v-if="rightsButtons['edit'] || rightsButtons['setDefault']">
          <template slot-scope="scope">
            <el-button v-if="rightsButtons['edit']" type="primary" size="small" @click="$router.push({ name: 'homeTabEdit', params: { id: scope.row.id } })" plain>编辑</el-button>
            <el-button v-if="rightsButtons['setDefault']" :disabled="!!(scope.row.isUsable)" :type="scope.row.isUsable ? 'default':'success'" size="small" @click="setDefault(scope.row.id)" plain>设为默认</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="listQuery.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal">
      </el-pagination>
    </section>
  </div>
</template>
<script>
import searchForm from '@/components/searchForm/index'
export default {
  name: 'homeTab',
  components: {
    searchForm
  },
  data() {
    const pageTypes = [
      { label: '线上首页-营销', value: 1 },
      { label: '线上首页-类目', value: 2 }
    ]
    return{
      pageTypes,
      listQuery: {
        name: '',
        startTime: '',
        endTime: '',
        page: 1,
        pageSize: 10,

        tempCreateDate: []
      },
      queryConfig: [
        { prop: 'name', type: 'input', label: '页面名称' },
        { prop: 'tempCreateDate', type: 'daterange', label: '创建时间' },
        { prop: 'type', type: 'select', label: '页面类型', data: pageTypes }
      ],
      listLoading: true,
      list: [],
      listTotal: 0
    }
  },
  created() {
    if (this.$store.getters.cachedViews.length === 0) this.fetchData()
  },
  activated() {
    this.fetchData()
  },
  methods: {
    // 获取列表
    fetchData() {
      const flag = this.listQuery.tempCreateDate && this.listQuery.tempCreateDate.length
      this.listQuery.startTime = flag ? (this.listQuery.tempCreateDate[0]+' 00:00:00') : ''
      this.listQuery.endTime = flag ? (this.listQuery.tempCreateDate[1]+' 23:59:59') : ''
      this.listLoading = true;
      let listQuery = {
        ...this.listQuery
      }
      delete listQuery.tempCreateDate
      this.request({
        url: '/manage-home-web/v5/tab/page',
        method: 'get',
        params: listQuery
      }).then(({data}) => {
        this.list = data.records || []
        this.listTotal = data.total
        this.listLoading = false
      }).catch(err => {
        console.log(err)
        this.list = []
        this.listTotal = 0
        this.listLoading = false
      })
    },
    // 点击搜索
    search () {
      this.listQuery.page = 1
      this.fetchData()
    },
    // 分页-每页条数
    handleSizeChange (value) {
      this.listQuery.pageSize = value
      this.fetchData()
    },
    // 分页-指定页
    handleCurrentChange(val){
      this.listQuery.page = val
      this.fetchData()
    },
    // 设为默认
    setDefault(id){
      this.$confirm("确定将改页面设为默认首页?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.request({
          url: '/manage-home-web/v5/tab/update/usable',
          method: 'post',
          data: { id }
        }).then(res => {
          this.$message.success('设置成功')
          this.fetchData()
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({ type: "info", message: "已取消操作" })
      })
    }
  }
}
</script>